<template>
    <div id="earnMoney">
        <div class="navbar" v-if="showBar">
            任务中心
        </div>
        <div class="banner">
            <div class="title" v-if="!showBar">
                 任务中心
            </div>
        </div>
        <div class="box-content">
            <div class="list" v-for="item in task.data" :key="item.id" @click="toTask(item.id)">
                <div :class=" 'avatar avatar_'+item.id">
                    <span v-if="item.id==1">新</span>
                    <span v-else-if="item.id==3">推</span>
                </div>
                <div class="info">
                    <div class="desc">
                        <div class="title">{{item.name}}</div>
                        <div class="txt">{{item.content}}</div>
                    </div>
                    <div class="btn">
                        <template v-if="item.is_finish!=1">
                            未完成
                            <b></b>
                        </template>
                        <template v-else>
                            已完成
                            <span style="d"></span>
                        </template>
                        <i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
            </div>
        </div>
        <router-link to="/lottery"  class="lottery" tag="div"></router-link>
        <van-popup v-model="showModal" class="alertModel" v-if="isNotBind" @click-overlay="closeAlertModel">
           <div class="popupContent">
              <div class="bg-img"></div>
              <div class="title">
                  绑定手机就送<span>15元无门槛红包</span>
              </div>
              <div class="btn" @click="bindPhone">
                  立即绑定
              </div>
              <span class="close" @click="closeAlertModel"></span>
           </div>
       </van-popup>
    </div>
</template>

<script>
    import {taskCenter} from 'api/game_box'
    import { mapState,mapMutations} from 'vuex'
    import {getUserInfo} from 'api/game_box'
    export default {
        data(){
            return{
                task:[],
                showBar:false,
                showModal:false,
                isNotBind:true
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                taskCenter().then(res=>{
                    if (res.data.error == 0) {
                        this.task=res.data.content;
                    }
                });
                if(!(this.loginInfo.mobile||this.loginInfo.phone)&&!sessionStorage.getItem('bindPhone')){
                      this.showModal=true;
                      sessionStorage.setItem('bindPhone','true')
                };
                let userid=this.loginInfo.userid||this.loginInfo.id;
                if(userid){
                    getUserInfo(userid).then(res=>{
                        if(res.data.error==0){
                            res=res.data.content;
                            this.SET_LOGININFO(res);
                            this.SET_USERINFO(res);
                        }
                    })
                }
            },
            toTask(id){
                switch (parseInt(id)){
                    case 1:
                        this.$router.push({
                            path: '/newTask',
                            query: {id: id}
                        })
                        break
                    case 2:
                        this.$router.push({
                            path: '/signTask',
                            query: {id: id}
                        })
                        break
                    case 3:
                        this.$router.push({
                            path: '/dailyTask',
                            query: {id: id}
                        })
                        break
                    case 4:
                        this.$router.push({
                            path: '/userFriend',
                        })
                        break
                }
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>50){
                this.showBar=true;
              }else{
                 this.showBar=false;
              }
            },
            closeAlertModel(){        
                this.showModal=false;
                sessionStorage.setItem('bindPhone','true')
            },
            bindPhone(){
                this.$router.push({
                    path: '/bindPhone',
                })
            },
            ...mapMutations(['SET_USERINFO','SET_LOGININFO'])
        },
        computed:{
            ...mapState(['loginInfo','userInfo'])
        },
        mounted () {
           window.addEventListener('scroll', this.handleScroll);
        },
        destroyed (){
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable';
@import '~styles/mixins';
#earnMoney{
    background: rgb(240,242,242);
    .navbar{
        position: fixed;
        top:0;
        z-index:999;
        width:7.5rem;
        left:50%;
        transform: translateX(-50%);
        height:0.8rem;
        line-height:0.8rem;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        color:#F2F2F2;
        background:#2BD4EE;
    }
    .banner{
        position: relative;
        z-index:99;
        padding-top:.2rem;
        width:7.5rem;
        height:3.3rem;
        @include bg-image('../../assets/image/task_pic_bg');
        background-size:100% 100%;
        background-repeat: no-repeat;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        .title{
            position:fixed;
            top:.2rem;
            left:50%;
            transform: translateX(-50%);
        }
    }
    .box-content{
        width:7.5rem;
        min-height:3rem;
        background: #fff;
        .list{
           display:flex;
           padding:.3rem;
           border-bottom:1px solid #f2f2f2;
           .avatar{
               width:.82rem;
               height:.82rem;
               line-height:.82rem;
               text-align: center;
               border-radius: .1rem;
               font-size:.5rem;
               color:#fff;
               &.avatar_1{
                   background: #00D8CC;
               }
               &.avatar_3{
                   background:#FACB3A;
               }
               &.avatar_4{
                   background:#AF97F8;
               }
           }
           .info{
               margin-left:.3rem;
               flex:1;
               display:flex;
               align-items: center;
               .desc{
                   flex:1;
                   display:flex;
                   flex-direction: column;
                   justify-content: space-around;
                   .title{
                       color:#333;
                       font-size:.3rem;
                       font-weight:500;
                   }
                   .txt{
                       margin-top:.1rem;
                       color:#7B7B7B;
                       font-size:.24rem;
                   }
               }
           }
           .btn{
               position:relative;
               font-size:.26rem;
               color:#7B7B7B;
               .icon{
                   position: relative;
                   top: .02rem;
                   font-size:.38rem;
               }
               b{
                    position: absolute;
                    width: .12rem;
                    height: .12rem;
                    background: #FF0000;
                    border-radius: 50%;
                    top: -.05rem;
                    right: .36rem;
               }
           }
        }
    }
    .lottery{
        position:absolute;
        bottom:1rem;
        left:50%;
        transform: translateX(-50%);
        width:7.5rem;
        height:2.76rem;
        @include bg-image('../../assets/image/task_lottery');
        background-size:100% 100%;
        background-repeat: no-repeat;
    }
    .alertModel{
        width:6.56rem;
        height:6.99rem;
        overflow: hidden;
        background: #fff;
        border-radius:.2rem;
        .bg-img{
            margin:0 auto;
            width:3.56rem;
            height:4.08rem;
            @include bg-image('../../assets/image/task_modal_img');
            background-repeat: no-repeat;
            background-size:100% 100%;
        }
        .title{
            margin-top:.4rem;
            text-align: center;
            font-size:.36rem;
            color:#333;
            span{
                color:#fb6048;
            }
        }
        .btn{
            margin:.4rem auto;
            text-align: center;
            width:5.2rem;
            height:1.2rem;
            font-size:.32rem;
            color:#fff;
            padding-top:.28rem;
            @include bg-image('../../assets/image/task_btn');
            background-size:100% 100%;
            background-repeat: no-repeat;
        }
    }
    .close{
        position:absolute;
        top:0;
        right:0;
        width:.96rem;
        height:.96rem;
        @include bg-image('../../assets/image/task_modal_close');
        background-repeat: no-repeat;
        background-size:100% 100%;
    }
}
</style>